<template>
	<view class="collection">
		<view class="top">
			<view class="icon-setting" @click="navigateTo('./collection-setting')"></view>
			<view class="summary">
				<view class="total-title">今日收款<view class="total-count">{{total_count}}</view>笔，共计</view>
				<view class="total-money">{{total_money}}</view>
			</view>
			<view class="top-links">
				<view class="top-link" @click="collectionCodePage">
					<image class="top-link-icon"
						:src="$util.img('/upload/uniapp/shop_uniapp/collection/icon-collection-code.png')"
						mode="aspectFit"></image>
					<view class="top-link-text">我的收款码</view>
				</view>
				<view class="top-link" @click="$util.redirectTo('./settlement-record')">
					<image class="top-link-icon"
						:src="$util.img('/upload/uniapp/shop_uniapp/collection/icon-settlement-record.png')"
						mode="aspectFit"></image>
					<view class="top-link-text">结算记录</view>
				</view>
			</view>
		</view>
		<view class="records">
			<view class="records-head">
				<view class="records-head-title">今日收款记录</view>
				<view class="records-head-more" @click="$util.redirectTo('./collection-record')">查看更多</view>
			</view>
			<mescroll-uni class="list-wrap" @getData="getListData" top="525" refs="mescroll" :size="10">
				<block slot="list">
					<view class="list-box">
						<view class="records-list" v-if="collect_list.length > 0">
							<view class="record" v-for="(itmes,index) in collect_list" :index="index">
								<view class="record-main">
									<view class="record-name">订单号</view>
									<view class="record-mony">{{itmes.collection_no}}</view>
								</view>
								<view class="record-main">
									<view class="record-name">用户昵称</view>
									<view class="record-mony">{{itmes.nickname}}</view>
								</view>
								<view class="record-main">
									<view class="record-name">订单金额</view>
									<view class="record-mony record-money">¥{{itmes.money}}</view>
								</view>
								<view class="record-main" v-if="itmes.balance_money > 0">
									<view class="record-name">消费券抵扣</view>
									<view class="record-mony record-money">¥{{itmes.balance_money}}</view>
								</view>
								<view class="record-main" v-if="itmes.point_money > 0">
									<view class="record-name">数字资产抵扣</view>
									<view class="record-mony record-money">¥{{itmes.point_money}}</view>
								</view>
								<view class="record-main" v-if="itmes.account5 > 0">
									<view class="record-name">兑换券抵扣</view>
									<view class="record-mony record-money">¥{{itmes.account5}}</view>
								</view>
								<view class="record-main">
									<view class="record-name">入账金额</view>
									<view class="record-mony record-money">¥{{itmes.real_money}}</view>
								</view>
								<view class="record-body">
									<view class="record-wx" v-if="itmes.type == 1">{{itmes.pay_type}}</view>
									<view class="record-zfb" v-else>{{itmes.pay_type}}</view>
									<view class="record-time">{{itmes.pay_time}}</view>
								</view>
							</view>
						</view>
						<ns-empty v-else text="暂无收款记录"></ns-empty>
					</view>
				</block>
			</mescroll-uni>
		</view>
	</view>
</template>

<script>
	import webUni from '@/common/js/uni.webview.1.5.6.js'
	import jweixin from '@/common/js/jweixin-1.6.0.js'
	export default {
		mixins: [webUni, jweixin],
		data() {
			return {
				total_count: 0,
				total_money: 0.00,
				collect_list: []
			}
		},
		onShow() {
			if (!this.$util.checkToken('/pages/property/collection/index')) return;
			this.getShopCert();
		},
		methods: {
			//获取店铺支付
			getShopCert() {
				this.$api.sendRequest({
					url: '/collection/api/shop/getReductInfo',
					success: res => {
						var data = res.data;
						if (res.code == 0 && data) {
							if (!res.data.enable_paychannel) { //未设置收款通道
								uni.showModal({
									title: '温馨提示',
									showCancel: false,
									confirmText: '去设置',
									confirmColor: '#FF6A00',
									content: '线下收款功能需设置收款商户号，点击前往设置？',
									success: res => {
										if (res.confirm) {
											this.$util.redirectTo('/pages/property/collection/collection-setting');
										}
									}
								});
							}
						}
					}
				});
			},
			getListData(mescroll) {
				let data = {
					type: 2,
					page_size: mescroll.size,
					page: mescroll.num
				};
				this.mescroll = mescroll;
				this.$api.sendRequest({
					url: '/collection/api/shop/record',
					data: data,
					success: res => {
						let newArr = [];
						let msg = res.message;
						if (res.code == 0 && res.data) {
							newArr = res.data.list;
							this.total_money = res.data.money;
							this.total_count = res.data.count;
						} else {
							this.$util.showToast({
								title: msg
							});
						}
						mescroll.endSuccess(newArr.length);
						//设置列表数据
						if (mescroll.num == 1) this.collect_list = []; //如果是第一页需手动制空列表
						newArr.forEach(v => {
							v.is_off = 0;
						});

						this.collect_list = this.collect_list.concat(newArr); //追加新数据
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			navigateTo(url) {
				uni.navigateTo({
					url
				})
			},
			collectionCodePage() {
				//活动海报信息
				this.$api.sendRequest({
					url: "/collection/api/shop/shopQRCode",
					success: res => {
						if (res.code == 0) {
							let poster = this.$util.img(res.data.path);
							let ua = uni.getSystemInfoSync().ua;
							console.log(ua);
							// 判断是否在微信内打开
							if (ua.match(/MicroMessenger/i) == "MicroMessenger") {
								jweixin.miniProgram.navigateTo({
									url: '/otherpages/member/collectionCode/collectionCode' +
										'?poster=' + encodeURIComponent(poster)
								})
								console.log('微信内');
							} else {
								webUni.navigateTo({
									url: '/otherpages/member/collectionCode/collectionCode' +
										'?poster=' + encodeURIComponent(poster)
								})
								console.log('app内');
							}
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.collection {
		padding: 20rpx 30rpx;
	}

	.top {
		position: relative;
		background: #FFFFFF;
		border-radius: 8rpx;
		padding: 0 32rpx;

		.icon-setting {
			position: absolute;
			right: 30rpx;
			top: 30rpx;
			width: 48rpx;
			height: 48rpx;
			background-image: url('../../../common/images/icon-collection-setting.png');
			background-size: 100% auto;
		}

		.summary {
			height: 228rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.total-title {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				color: #909399;
				line-height: 40rpx;
			}

			.total-money {
				margin-top: 30rpx;

				&::before {
					content: "¥";
					font-size: 32rpx;
				}

				font-size: 60rpx;
				color: #FF6A00;
				line-height: 46rpx;
			}

			.total-count {
				color: #FF6A00;
			}
		}

		.top-links {
			height: 145rpx;
			border-top: 1px solid #DBDBDB;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.top-link {
				display: flex;
				justify-content: center;
				align-items: center;

				.top-link-icon {
					width: 48rpx;
					height: 48rpx;
					border: 1rpx solid #ccc;
				}

				.top-link-text {
					margin-left: 16rpx;
					font-size: 28rpx;
					color: #303133;
					line-height: 40rpx;
				}
			}
		}
	}

	.records {
		margin-top: 30rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		padding: 0 30rpx;

		.records-head {
			position: relative;
			padding: 30rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&::before {
				position: absolute;
				left: -30rpx;
				width: 4rpx;
				height: 30rpx;
				content: ' ';
				background: #FF6A00;
				border-radius: 2rpx;
			}

			.records-head-title {
				font-size: 32rpx;
				color: #303133;
				line-height: 45rpx;
			}

			.records-head-more {
				font-size: 28rpx;
				color: #909399;
				line-height: 40rpx;
			}
		}

		.list-box {
			padding: 0 30rpx;
		}

		.records-list {
			border-bottom-left-radius: 8rpx;
			border-bottom-right-radius: 8rpx;
			background: #FFFFFF;
			padding: 0 30rpx;

			.record {

				padding: 30rpx 0;
				border-top: 1px solid #DBDBDB;

				.record-main {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 15rpx;

					.record-money {
						color: #FF6A00;
					}
				}

				.record-name {
					font-size: 28rpx;
					color: #303133;
					line-height: 40rpx;
				}

				.record-mony {
					font-size: 28rpx;
					color: #303133;
					line-height: 40rpx;
				}

				.record-body {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 12rpx;
					font-size: 24rpx;
					line-height: 34rpx;

					.record-time {
						color: #909399;

					}

					.record-wx {
						color: #31bb6d;
					}

					.record-zfb {
						color: #FF6A00;
					}
				}

			}
		}
	}
</style>